<template>
  <el-card class="content-card masonry-item">
    <router-link :to="`/show/${item.id}`">
    <div class="image-container">
      <img :src="safeGet(item, 'image', 'https://picsum.photos/300/180')"  class="card-image" alt="card image" />
      <div class="card-category">{{ item.category }}</div>
    </div>
    <div class="card-content">
      <div class="card-tags">
        <el-tag 
          v-for="tag in item.tags" 
          :key="tag" 
          size="small" 
          type="info"
          class="card-tag"
        >
          {{ getTagLabel(tag) }}
        </el-tag>
      </div>
      <h3 class="card-title">{{ item.title }}</h3>
      <p class="card-desc" v-if="item.description && item.description !== '无描述'">
        {{ item.description }}
      </p>
      <p class="card-desc placeholder" v-else>暂无内容概述</p>
      <div class="card-footer">
        <div class="author-info">
          <span class="card-author">By {{ item.author }}</span>
          <span class="card-date">{{ item.date }}</span>
        </div>
        <div class="card-stats">
          <el-icon><i-ep-view /></el-icon>
          <span>{{ item.views }}</span>
          <el-icon><i-ep-star /></el-icon>
          <span>{{ item.likes }}</span>
        </div>
      </div>
    </div>
    </router-link>
  </el-card>
</template>

<script setup>

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({
      image: '',
      category: '',
      tags: [],
      title: '',
      description: '',
      author: '',
      date: '',
      views: 0,
      likes: 0
    })
  },
  tags: {
    type: Array,
    default: () => []
  }
});

// 安全访问方法
const safeGet = (obj, path, defaultValue = '') => {
  return path.split('.').reduce((acc, key) => 
    (acc && acc[key] !== undefined) ? acc[key] : defaultValue, 
    obj
  );
};

// 获取标签名称
const getTagLabel = (tagId) => {
  const tag = props.tags.find(t => t.id === tagId);
  return tag ? tag.label : tagId;
};
</script>

<style scoped>
.content-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 8px;
  overflow: hidden;
  height: auto;
  margin-bottom: 20px;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.image-container {
  position: relative;
}

.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.card-category {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

.card-content {
  padding: 16px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.card-tag {
  margin-right: 4px;
}

.card-title {
  font-size: 16px;
  margin: 0 0 10px 0;
  line-height: 1.4;
  color: #1f2937;
}

.card-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 16px;
}

.card-desc.placeholder {
  color: #a8a8a8;
  font-style: italic;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.card-author {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
}

.card-date {
  font-size: 12px;
  color: #909399;
}

.card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 12px;
}

.card-stats .el-icon {
  font-size: 14px;
}

a:hover {
  text-decoration: none;
}
</style>